import React from 'react';
import {Input, Form, Row, Col} from 'antd';

import RCModal from '@components/modal/index.jsx';

import './scss/work_link_modal.scss';

const FormItem = Form.Item;

class HelpMessageModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    // 点击提交
    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    // 取消关闭按钮
    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    render() {

        let {modalVisible = true, showFooter = true, data = {}} = this.props;

        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        };

        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const rules = [{required: true, message: '必填项！'}];

        const titleError = isFieldTouched('title') && getFieldError('title');// 标题不能为空
        const urlError = isFieldTouched('url') && getFieldError('url');//链接地址不能为空

        return (
            <RCModal
                visible={modalVisible}
                showFooter={showFooter}
                title='工作链接信息'
                footerText={{okText: '提交'}}
                disabled={this.hasErrors(getFieldsError())}
                onOk={this.submitForm.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form layout='horizontal'>
                    <div className="work-link-modal modal-content">
                        <Row>
                            <Col span={24}>
                                <FormItem label='标题' {...formItemLayout}
                                          validateStatus={titleError ? 'error' : ''}
                                          help={titleError || ''}
                                >
                                    {
                                        getFieldDecorator('title', {initialValue: data.title || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='链接地址' {...formItemLayout}
                                          validateStatus={urlError ? 'error' : ''}
                                          help={urlError || ''}
                                >
                                    {
                                        getFieldDecorator('url', {initialValue: data.url || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>

            </RCModal>
        )
    }
}

HelpMessageModal = Form.create({})(HelpMessageModal);
export default HelpMessageModal;